import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import * as Actions from '../../actions/userinfo.js'
import localstore from '../../util/localstore.js'
import {CITYNAME} from '../../config/localstateKey.js'

import Header from '../../components/Header'
import CurrentCity from '../../components/CurrentCity'
import CityList from '../../components/CityList'

// import './style.scss'

class City extends React.Component{
    constructor(props, context){
        super(props, context)
    }
    render() {
        return (
            <div>
                <Header title="选择城市"></Header>
                <CurrentCity city={this.props.userinfo.cityName}></CurrentCity>
                <CityList changeFn={this.changeCity.bind(this)}></CityList>
            </div>
        )
    }
    componentDidMount() {
        // console.log(this.props.userinfo.cityName)
    }

    changeCity(newCity) {
        if(newCity == null) {
            return
        }
        //1.修改redux
        const userinfo = this.props.userinfo
        userinfo.cityName = newCity
        this.props.userinfoActions.update(userinfo)
        //2.修改localstorage
        localstore.setItem(CITYNAME, newCity)

        //3.跳转到首页
        console.log(this.props.history)
        this.props.history.push('/')
    }
}

function mapStateToProps(state){
    return {
        userinfo: state.userinfo
    }
}
function mapDispatchToProps(dispatch){
    return {
        userinfoActions: bindActionCreators(Actions, dispatch)
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(City)